<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link
	href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700'
	rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="css/reset.css">
<!-- CSS reset -->
<link rel="stylesheet" href="css/style.css">
<!-- Resource style -->
<script src="js/modernizr.js"></script>
<!-- Modernizr -->

<title>初版 不带tab</title>
</head>
<style type="text/css">
body {
	overflow-x: hidden;
	overflow-y: hidden;
}

#tab_bar {
	width: 400px;
	height: 20px;
	float: left;
}

#tab_bar ul {
	padding: 0px;
	margin: 0px;
	height: 20px;
	text-align: center;
}

#tab_bar li {
	list-style-type: none;
	float: left;
	width: 133.3px;
	height: 20px;
	background-color: gray;
}

.tab_css {
	width: 400px;
	height: 200px;
	background-color: orange;
	display: none;
	float: left;
}
</style>
<script type="text/javascript">
	var myclick = function(v) {
		var llis = document.getElementsByTagName("li");
		for (var i = 0; i < llis.length; i++) {
			var lli = llis[i];
			if (lli == document.getElementById("tab" + v)) {
				lli.style.backgroundColor = "orange";
			} else {
				lli.style.backgroundColor = "gray";
			}
		}

		var divs = document.getElementsByClassName("tab_css");
		for (var i = 0; i < divs.length; i++) {

			var divv = divs[i];

			if (divv == document.getElementById("tab" + v + "_content")) {
				divv.style.display = "block";
			} else {
				divv.style.display = "none";
			}
		}

	}
</script>
<body scroll="no">
	<header id='header' class="cd-main-header">
		<a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>

		<div class="cd-search is-hidden">
			<form action="#0">
				<input type="search" placeholder="Search...">
			</form>
		</div>
		<!-- cd-search -->

		<a href="#0" class="cd-nav-trigger">Menu<span></span></a>

		<nav class="cd-nav">
			<ul class="cd-top-nav">
				<li><a href="#0">Tour</a></li>
				<li><a href="#0">Support</a></li>
				<li class="has-children account"><a href="#0"> <img
						src="img/cd-avatar.png" alt="avatar"> Account
				</a>

					<ul>

						<li id='123'><a href="#0">My Account</a></li>
						<li><a href="#0">Edit Account</a></li>
						<li><a href="#0">Logout</a></li>
					</ul></li>
			</ul>
		</nav>
	</header>
	<!-- tab -->

	<!-- tab end -->
	<!-- .cd-main-header -->

	<main class="cd-main-content">
	<nav id='nav' class="cd-side-nav">
		<ul>
			<li class="cd-label">Main</li>
			<li class="has-children overview"><a href="#0">公司管理</a>

				<ul>
					<li id='124'><a href="#0">员工管理</a></li>
					<li><a href="#0">店长管理</a></li>
					<li><a href="#0">Category 2</a></li>
				</ul></li>
			<li class="has-children notifications active"><a href="#0">供货商管理<span
					class="count">3</span></a>

				<ul>
					<li><a href="#0">供货商管理</a></li>
					<li><a href="#0">我的订单</a></li>
					<li><a href="#0">Other</a></li>
				</ul></li>

			<li class="has-children comments"><a href="#0">Comments</a>

				<ul>
					<li><a href="#0">All Comments</a></li>
					<li><a href="#0">Edit Comment</a></li>
					<li><a href="#0">Delete Comment</a></li>
				</ul></li>
		</ul>

		<ul>
			<li class="cd-label">Secondary</li>
			<li class="has-children bookmarks"><a href="#0">Bookmarks</a>

				<ul>
					<li><a href="#0">All Bookmarks</a></li>
					<li><a href="#0">Edit Bookmark</a></li>
					<li><a href="#0">Import Bookmark</a></li>
				</ul></li>
			<li class="has-children images"><a href="#0">Images</a>

				<ul>
					<li><a href="#0">All Images</a></li>
					<li><a href="#0">Edit Image</a></li>
				</ul></li>

			<li class="has-children users"><a href="#0">Users</a>

				<ul>
					<li><a href="#0">All Users</a></li>
					<li><a href="#0">Edit User</a></li>
					<li><a href="#0">Add User</a></li>
				</ul></li>
		</ul>

		<ul>
			<li class="cd-label">Action</li>
			<li class="action-btn"><a href="#0">+ Button</a></li>
		</ul>
	</nav>

	<div class="content-wrapper" style="width: 100%;">
		<div id="tab_bar">
			<ul>
				<li id="tab1" onclick="myclick(1)" style="background-color: orange">
					tab1</li>
				<li id="tab2" onclick="myclick(2)">tab2</li>
				<li id="tab3" onclick="myclick(3)">tab3</li>
			</ul>
		</div>
		<div class="tab_css" id="tab1_content" style="display: block">
			<div>页面一</div>
		</div>
		<div class="tab_css" id="tab2_content">
			<div>页面二</div>
		</div>
		<div class="tab_css" id="tab3_content">
			<div>页面三</div>
		</div>
		<!--
		 <iframe id='iframeOne' scrolling="yes" class='mainIframe' src="../../../jsp/supplier/supplierOrderIndex.jsp" frameborder="0"></iframe>
		

		<iframe id='iframeOne' scrolling="yes" class='mainIframe'
			src="https://www.jd.com/" frameborder="0"></iframe>

        -->


	</div>
	<!-- .content-wrapper --> </main>
	<!-- .cd-main-content -->
	<script src="js/jquery-2.1.4.js"></script>
	<script src="js/jquery.menu-aim.js"></script>
	<script src="js/main.js"></script>
	<!-- Resource jQuery -->
	<script type="text/javascript">
		$("#123").click(function() {
			alert(0);
		});
		$("#124").click(function() {
			alert(1);
		});

		windowsSize();

		$(window).resize(function() {
			windowsSize();
		});

		//设置iframe的长宽
		function windowsSize() {
			var a = $(window).width() - $("#iframeOne").position().left;
			var b = $(window).height() - $("#header").height();

			$("#iframeOne").css("width", a);
			//$("#iframeOne").css("height", b);
			$("#iframeOne").css("height", b);

			//alert($("#iframeOne").css("left"));
			//alert($("#iframeOne").position().left);

		}
	</script>
</body>
</html>